<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper中文教程</title>
  <!-- 🔔1.1 通过 link 标签引进 .min.css 文件 -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  <!-- 3. 你可能想要给Swiper定义一个大小 -->
  <style>
    .swiper {
      width: 100%;
      height: 500px;
      border: 1px solid #000;
    }

    /* 修改左右导航按钮颜色 */
    .swiper-button-prev,
    .swiper-button-next {
      color: #D40C2D;
    }

    /* 分页器分区 */
    .my-pagination {
      width: 100%;
      /* 绝对定位 */
      position: absolute;
      /* 靠底部位置 */
      bottom: 20px;
      /* 定位层级 */
      z-index: 999;
      /* 开启 flex 布局 */
      display: flex;
      /* 主轴居中 */
      justify-content: center;
    }

    /* 分页器的普通小方块 */
    .my-pagination-dot {
      width: 100px;
      height: 3px;
      background-color: rgba(248, 54, 54, 0.3);
      margin: 0 7px;
    }

    /* 高亮小方块 */
    .active {
      background-color: #D40C2D;
    }
  </style>
</head>

<body>
  <!-- 2. 添加HTML内容 -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./images/banner01.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/banner02.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/banner03.jpg" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 自己写的分页器结构 -->
    <div class="my-pagination">
      <span class="my-pagination-dot active"></span>
      <span class="my-pagination-dot"></span>
      <span class="my-pagination-dot"></span>
    </div>
  </div>
  <!-- 🔔1.2. 通过 script 标签引进 .min.js 文件 -->
  <script src="./swiper/swiper-bundle.min.js"></script>
  <!-- 4. 初始化Swiper -->
  <script>
    let mySwiper = new Swiper('.swiper', {
      // ✅ 基于 Loop模式 / 无限循环(200) 例子改造成华为轮播图
      // 例子链接：https://swiper.com.cn/demo/200-infinite-loop.html
      slidesPerView: 1,   // 展示一张图片
      effect: 'slide',     // 轮播图效果  fade  cube  overflow
      loop: true,     // 无限循环
      pagination: {   // 分页器配置(小圆点)
        el: ".my-pagination",   // 分页器分区类名，🚨注意这里类名有个 点 .
        bulletClass: 'my-pagination-dot',  // 分页器内元素的类名
        bulletActiveClass: 'active',       // 分页器内高亮元素的类名
        clickable: true,            // 点击小圆点能切换
      },
      navigation: {   // 导航按钮配置
        nextEl: ".swiper-button-next",   // 下一张类名(右箭头)
        prevEl: ".swiper-button-prev",   // 上一张类名(左箭头)
      },
    })        
  </script>
</body>

</html>